<template>
	<view class="login">
		<view class="login-top">
			<view class="icons">
				<icon type="clear" size="26" @click="errstop" />
			</view>
		</view>
		<view class="login-img">
			<image src="https://tilin.gitee.io/super_hero_preview/static/icons/default-face.png" class="me-img"></image>
		</view>

		<view class="form-item">
			<label>账号</label>
			<input v-model="obj.name" placeholder="请输入用户名" placeholder-class="placeho" />
		</view>

		<view class="form-item">
			<label>密码</label>
			<input v-model="obj.password" placeholder="请输入密码" type="password" placeholder-class="placeho" />
		</view>

		<button type="primary" @click="add">登录/注册</button>
		<!-- 第三方登录 -->
		<view class="third_wrapper">
			<!-- #ifdef APP-PLUS -->

			<view class="third_line">
				<text class="txt">——————&#12288;第三方登录&#12288;——————</text>
			</view>
			<view class="third_icon_wrapper">
				<image src="https://tilin.gitee.io/super_hero_preview/static/icons/weixin.png"
					@click="appLogin('weixin')" class="third_icon" mode="">
				</image>
				<image src="https://tilin.gitee.io/super_hero_preview/static/icons/QQ.png" @click="appLogin('qq')"
					class="third_icon" mode=""></image>
				<image src="https://tilin.gitee.io/super_hero_preview/static/icons/weibo.png"
					@click="appLogin('sinaweibo')" class="third_icon" mode="">
				</image>
			</view>

			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="third_icon_wrapper">
				<!-- 2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区） -->
				<!-- <button open-type="getUserInfo" @getuserinfo="wxLogin" type="primary" size="mini">微信一键登录</button> -->

				<!-- 新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息 -->
				<image src="https://tilin.gitee.io/super_hero_preview/static/icons/weixin.png" @click="wxLogin"
					class="third_icon" mode="">
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "login",
		props: [''],
		data() {
			return {
				obj: {
					name: '',
					password: '',
					sex: -1,
					avatar: 'https://tilin.gitee.io/super_hero_preview/static/icons/default-face.png',
					birthday: "1998-12-27",
					ID: 123456789
				}
			};
		},
		created() {
			this.obj.name = ''
			this.obj.password = ''
		},
		methods: {
			errstop() {
				this.$emit('loginstop')
			},
			add() {
				if (this.obj.name && this.obj.password) {
					this.$emit('getadd', this.obj)
				} else {
					uni.showToast({
						icon: "none",
						title: '请输入账号或密码'
					});
				}
			},
			//#ifdef APP-PLUS
			// app端授权登录
			appLogin(logintype) {
				let _this = this
				uni.login({
					provider: logintype,
					success(res) {
						uni.getUserInfo({
								provider: logintype,
								success: info => {
									//拿到用户信息
									console.log(info)
									const {
										userInfo
									} = info
									switch (logintype) {
										case 'weixin': {
											_this.obj.name = userInfo.nickName
											_this.obj.password = 123456
											_this.obj.sex = userInfo.gender
											_this.obj.avatar = userInfo.avatarUrl
											_this.obj.ID = userInfo.openId
										};
										break;
									case 'qq': {
										_this.obj.name = userInfo.nickName
										_this.obj.password = 123456
										_this.obj.avatar = userInfo.figureurl_qq_2
										_this.obj.ID = userInfo.openId
									};
									break;
									case 'sinaweibo': {
										_this.obj.avatar = userInfo.avatar_large
										_this.obj.name = userInfo.nickName
										_this.obj.password = 123456
										_this.obj.ID = userInfo.id
									};
									break;
									default:
										null
									}
									
									
									_this.$emit('getadd', _this.obj)
									//登录 调用开发者接口完成登录
									// uni.request({

									// })
								})
						}
					},
				})
			},
			// #endif
			// #ifdef MP-WEIXIN
			//微信登录
			wxLogin() {
				let _this = this
				uni.getUserProfile({
					desc: '测试用',
					success(res) {
						console.log(res)
						_this.obj.name = res.userInfo.nickName
						_this.obj.password = 123456
						_this.obj.sex = res.userInfo.gender
						_this.obj.avatar = res.userInfo.avatarUrl
						_this.obj.ID = res.iv
						_this.$emit('getadd', _this.obj)
						// uni.login({
						// 	provider: 'weixin',
						// 	success: res => {
						// 		拿到code发给后端一般返回token和其他业务数据比如用户基本信息等完成微信登录
						// 		console.log(res)
						// 	}
						// })
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// #endif
		}
	}
</script>

<style>
	.third_icon {
		width: 60rpx;
		height: 60rpx;
		margin: 0 25rpx;
	}

	.third_icon_wrapper {
		text-align: center;
		margin-top: 30rpx;
	}

	.wx_login {
		text-align: center;
	}

	.third_line {
		margin-top: 30rpx;
		text-align: center;
		color: #ccc;
	}

	input {
		width: 80%;
		margin-left: 40rpx;
	}

	button {
		margin-top: 50rpx;
	}

	.placeho {
		color: #ccc;
		font-size: 30rpx;

	}

	.form-item {
		display: flex;
		border-bottom: 1px solid #dbdbda;
		padding-bottom: 20rpx;
		margin-top: 50rpx;
	}

	label {
		color: grey;
		font-size: 35rpx;
	}

	.icons {
		display: flex;
		justify-content: flex-end;
		margin: 30rpx 10rpx 0 0;
	}

	.login {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #fff;
		z-index: 9;
		padding: 0 20rpx;
	}

	.login-img {
		width: 100%;
		text-align: center;
		margin-top: 50rpx;
	}

	.me-img {
		width: 150rpx;
		height: 150rpx;

	}
</style>
